<template>
  <view>
    <view id="top" ref="top" class="tops">
	    <u-picker :show="showUPicker" ref="uPicker" :columns="cityList" @confirm="confirm" @change="changeHandler" @cancel="showUPicker = false"></u-picker>
      <l-tab-bar type="3" :tabs="tabs" :active-inx.sync="activeInx" @change="tabClick" />
	  <view class="screening" style="background-color: #fff;" v-if="activeInx == 0 && sothebusState">
	  	<view class="screening-city" @click="screeningDownCityFn">
	  		<view class="screening-city-conten">
	  			{{chooseCity[1]}}
	  		</view><span :class="showUPicker?'screening-down-city-false':'screening-down-city'"></span>
	  	</view>
		<view class="screening-data">
			<view class="example-body" style="width: 100%;width: fit-content;flex-direction: row;align-items: center;">
				 <view class="time-border">
				 	<picker class="picker" :value="singleState" mode="date" @change="bindStateDateChange">
				 		<view>{{ singleState }}</view>
				 	</picker>
					<view v-if="singleState != '请选择开始日期'" class="close-time" @click="singleState = '请选择开始日期'">
						<image src="https://tbb-file.oss-cn-shenzhen.aliyuncs.com/user_uniapp/static/icon_close.png" mode="widthFix" style="width: 100%;height: 100%;"></image>
					</view>
				 </view>
				 <span class="data-infomation" >至</span>
				 <view class="time-border">
				 	<picker class="picker" :value="singleEnd" mode="date" @change="bindEndDateChange">
				 		<view>{{ singleEnd }}</view>
				 	</picker>
					<view v-if="singleEnd != '请选择结束日期'" class="close-time" @click="singleEnd = '请选择结束日期'">
						<image src="https://tbb-file.oss-cn-shenzhen.aliyuncs.com/user_uniapp/static/icon_close.png" mode="widthFix" style="width: 100%;height: 100%;"></image>
					</view>
				 </view>
			</view>
			<!-- <view class="screenOrder" @click="getSothBusList">搜索</view> -->
		</view>
	  </view>
	 <!-- <view class="screening-cv" v-if="activeInx == 0">
		<view class="screenOrder-cv-close" @click="closeSothBusList">清空</view>
		<view class="screenOrder-cv" @click="getSothBusList">搜索</view>
	  </view> -->
    </view>
    <swiper
        class="bg-primary"
        :style="{height:scrollHeight+'px'}"
        :current="activeInx"
        :duration="300"
		:scroll-y="true"
        @change="onswiperchange"
        @animationfinish="animationfinish"
        @onAnimationEnd="animationfinish"
    >
      <swiper-item style="overflow: scroll;" v-for="(page, index) in tabs" :key="index" class="flex-column">
		  <!-- <view class="driver" style="width: 100vw; height: 1rpx; background-color: transparent;margin-top:190rpx;"></view> -->
		  <!-- 待抢单列表 -->
        <block v-if="index == 0">
			<block v-if="sothebusState">
				<sothebus-order  :NUMBERJUDEGE="NUMBERJUDEGE" :cityId="cityId" :singleState="singleState" :singleEnd="singleEnd" :orderList="orderList" :orderType="0" ref="page" class="flex-column flex-item" :height="scrollHeight" :type="page.type" @showModel="showModel" @getSize="getSize" />
			</block>
			<view v-else class="no-sothebus-state">
				<view style="height: fit-content;">
					<view class="state-title">
						暂未开通此功能
					</view>
					<view class="opent-sothebus-state" @click="jump('/user/set-rob-order/set-rob-order')">
						去开启
					</view>
				</view>
			</view>
		</block>
			<sothebus-order v-else-if="index == 1" :orderType="1" ref="page" class="flex-column flex-item" :height="scrollHeight" :type="page.type" @showModel="showModel" @getSize="getSize" />
		<!-- 其余订单列表 -->
		<block v-else-if="index == 2">
			<sothebus-order :orderList="orderList" :orderType="2" ref="page" class="flex-column flex-item" :height="scrollHeight" :type="page.type" @showModel="showModel" @getSize="getSize" />
		</block>
		<block v-else>
			<sothebus-order :orderList="orderList" :orderType="3" ref="page" class="flex-column flex-item" :height="scrollHeight" :type="page.type" @showModel="showModel" @getSize="getSize" />
		</block>
      </swiper-item>
    </swiper>

    <!-- <l-add-button @click="jump('/order/add-new/add-new')" /> -->

    <!-- #ifndef APP-PLUS -->
    <order-modal :show.sync="show" @reload="reload(activeInx)" />
    <!-- #endif -->

    <view v-if="noPermission" class="no-permission">
      <l-no-data type="permission" text="暂无权限" />
    </view>
  </view>
</template>

<script>
import SothebusOrderPage from '../sothebus-order-page/sothebus-order-page'
import SothebusOrder from '../sothebus-order/sothebus-order'
import OrderModal from '../order-modal/order-modal'
import request from '@/common/api/request'
import colors from '@/common/colors'
import { mapGetters, mapMutations } from 'vuex'
import { jump, getElementInfo, sysInfo } from '@/common/util'
import { getNewestVerion } from '@/common/api/version'
import { checkVersion, openSubView } from '@/common/plus'
import { orderAutoPush, orderStatusUpdate } from '@/common/api/order.js'
import { getCarpoolTakeOrderStatus, setCarpoolTakeOrderStatus, driverSubsidyProportionPage, setDriverSubsidyProportion, grabOrderPage } from '@/common/api/driver.js'
import cityData from '@/common/sothebus-area.json'
// #ifdef APP-PLUS
const dom = weex.requireModule('dom')
// #endif
let pageList = []
const MAX_CACHE_DATA = 20
export default {
  components: {
    OrderModal,
	SothebusOrderPage,
	SothebusOrder
  },
  props:{
	  sotheFlag:{}
  },
  data() {
    return {
		NUMBERJUDEGE:0,
		shoDatetime:false,
		mode: 'range',
		list: [
				{
					name: '旅游包车'
				}, 
				{
					name: '商务接送'
				}, 
				{
					name: '特价巴士'
			}
			],
			orderList:{},
			pageCurrent:1,
			pageSize:20,
		current: 0,
		cityList: [],
		cityLevel1: [],
		cityLevel2: [],
		cityLevel3: [],
      activeInx: 0,
      tabs: [
       { title: '待抢单', size: 0, type: 3, icon: 'icon_order_confirm.png' },
       { title: '待分配', size: 0, type: 4, icon: 'icon_order_confirm.png' },
       { title: '待完成', size: 0, type: 0, icon: 'icon_order_finish.png' },
       { title: '已结束', size: 0, type: 2, icon: 'icon_order_end.png' }
      ],
      scrollHeight: 0,
      isTap: false,
      _lastTabIndex: 0,
      show: false,
	  showUPicker:false,
	  showData:false,
      noPermission: false,
      colorT1: colors.fontcolorT1,
	  chooseCity:['全部','全部'],
	  single: ['2024-07-01','2024-07-02'],
	  orderStatus:0,
	  cityId:[],
	  dates:'asd',
	  startDates:'',
	  endDates:'',
	  singleState:'2023-07-01',
	  singleEnd:'2023-07-02',
	  wss:null
    }
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo',
      userId: 'userId',
      auth: 'auth',
      orderIndex: 'orderIndex',
      firstLogin: 'firstLogin',
      firstShowModel: 'firstShowModel',
	  sothebusState: 'sothebusState'
    })
  },
  watch:{
	  sotheFlag:{
	  		  handler(newVal){
	  			  this.getSothebusData()
	  		  },
	  		  immediate:true,
	  		  deep:true
	  },
	  single(newVal){
		  if(newVal[0] !='' && newVal[1] != ''){
		  }
	  },
	  cityId:{
		  handler(newVal){
		  },
		  deep:true
	  },
	  sothebusState:{
		  handler(newVal){
			  if(newVal){
				  this.getWsList()
			  }
		  },
		  immediate:true,
		  deep:true
	  },
	  // wss:{
		 //  handler(newVal){
			//   if(newVal){
			// 	  if(newVal.infoValue){
			// 		 console.log(newVal)
			// 	  }
			//   }
		 //  },
		 //  immediate:true,
		 //  deep:true
	  // }
  },
  created() {
  	this.initCityData()
	this.getSothebusData()
	  const currentDate = new Date();
	  const year = currentDate.getFullYear();
	  const month = String(currentDate.getMonth() + 1).padStart(2, '0');
	  const day = String(currentDate.getDate()).padStart(2, '0');
	  const dateNumericFormat = year + '-' + month + '-' + day
	  this.singleState = '请选择开始日期';
	  this.singleEnd = '请选择结束日期';
  },
  onShow() {
    /* #ifdef MP-WEIXIN*/
    if (this.firstLogin) {
      this.showWechatModal(0)
    }
    /* #endif*/
    if (this.userId) {
      this.noPermission = !this.auth.includes('travel_order_view')
      if (pageList.length) {
        for (let i = 0; i < pageList.length; i++) {
          this.reload(i)
        }
        if (this.orderIndex === 0) {
          this.switchTab(0)
          this.setOrderIndex(null)
        }
      }
    }
  },
  beforeCreate() {
    // #ifdef APP-PLUS
    dom.addRule('fontFace', {
      'fontFamily': 'tbbAdminApp',
      'src': "url('https://at.alicdn.com/t/font_3339163_kolu475jyt.ttf?t=1650889807885')"
    })
    // #endif
  },
  onPullDownRefresh() {
    if (this.activeInx === 0) pageList[this.activeInx].getData()
    else pageList[this.activeInx].reloadList()
  },
  mounted() {
    this.getPageHeight()
    this.checkNewestVersion()
	console.log(this.sothebusState,'sothebusState')
    uni.$on('orderReload', () => {
      this.reload(this.activeInx)
    })
  },
  beforeDestroy() {
    uni.$off('orderReload')
	this.wss.closeSocket()
  },
  methods: { 
	  async getWsList(){
		 if(!this.wss){
			 this.wss = await orderAutoPush()
			 let _then = this
			 this.wss.socketExamples.onMessage((res)=>{
			 			  let msg = JSON.parse(JSON.stringify(res.data));
			 			  msg = JSON.parse(msg)
			 			  this.orderList = msg
			 			  console.log('接收webSocket消息', msg);
			 })
		 }
	  },
	  // 选择时间 日期
	  	bindStateDateChange: function(e) {
	  		this.singleState = e.target.value;
			this.getSothBusList()
	  	},
		bindEndDateChange: function(e) {
			this.singleEnd = e.target.value;
			this.getSothBusList()
		},
	  async getSothebusData(){
		  const [err,res] = await getCarpoolTakeOrderStatus()
		  this.setSothebusstate(res.data.data)
	  },
	  	shoDatetimeChange(e) {
	  				this.single = e;
	  				console.log("-change事件:", e);
	  			},
				// 
				screenOrder(){
					
				},
	  screeningDownCityFn(){
		this.showUPicker = true  
	  },
	  initCityData(){
                // 遍历城市
				cityData.forEach((item1, index1) =>{
					let temp2 = [];
					this.cityLevel1.push(item1.label);
					
					let temp4 = [];
					let temp3 = [];
					// // 遍历市
					if(item1.children.length>0){
						item1.children.forEach((item2, index2) =>{
							temp2.push(item2.label);
							// 遍历区
							// if(item2.children && item2.children.length > 0){
							// 	item2.children.forEach((item3, index3) =>{
							// 		temp3.push(item3.label);
							// 	})
							// }
							temp4[index2] = temp3;
							temp3 = [];
						})
					}
					// this.cityLevel3[index1] = temp4;
					
					this.cityLevel2[index1] = temp2;
				})
				// 选择器默认城市
				// this.cityList.push(this.cityLevel1,this.cityLevel2[0],this.cityLevel3[0][0]);
				this.cityList.push(this.cityLevel1,this.cityLevel2[0]);
			},
			  changeHandler(e) {
							const {
								columnIndex,
								index,
								indexs,
								value,
								values,
								// 微信小程序无法将picker实例传出来，只能通过ref操作
								picker = this.$refs.uPicker
							} = e;
							if (columnIndex === 0) { // 选择第一列数据时
			                    // 设置第二列关联数据
								picker.setColumnValues(1, this.cityLevel2[index]);
			                    // 设置第三列关联数据
								// picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
							}else if(columnIndex === 1){// 选择第二列数据时
			                    // 设置第三列关联数据
								// picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
							}
						},
						confirm(e) {
							// 输出数组 [省, 市, 区]
							this.chooseCity = e.value
							this.cityId = this.cityIdFilter(this.chooseCity) // 位置数组id转换
							this.cityId[0] == "" ? this.cityId = [] : this.cityId = this.cityId
							// 隐藏城市选择器
							this.showUPicker = false;
							},
						cityIdFilter(data){
							let cityDataCv = data,// 接收处理参数
								filterCityId = [] // 过滤后的位置数组结果
							try{
								cityData.map((res,index)=>{ // 遍历数据源进行查询
									if(res.label == cityDataCv[0]){ // 省份筛选
										filterCityId[0] = res.value
										if(res.children.length > 0){ // 市区筛选
											res.children.map((resp,indxp)=>{
												if(resp.label == cityDataCv[1]){
													filterCityId[1] = resp.value
													throw new Error('数据处理结束')
												}
											})
										}
									}
								})
							}catch(e){}
							// 返回处理结果
							console.log(filterCityId)
							this.getSothBusList()
							return filterCityId
						},
						async getListData(data){
							let parmes = {
								startTime:this.singleState ? this.singleState + ' 00:00:00' : '', 
								endTime:this.singleEnd ? this.singleEnd + ' 23:59:59' : '',
								fromBizScope:this.cityId.length > 0 && this.cityId[0] != '' ? this.cityId[0] + ',' + this.cityId[1] : '',
								pageCurrent:this.pageCurrent + 1,
								pageSize:this.pageSize + 20
							}
							console.log(parmes)
							let [err,res] = await grabOrderPage(parmes)
							this.orderList = res.data.data.records
							console.log(this.orderList)
						},
						closeSothBusList(){
							this.singleState = '请选择开始日期'
							this.singleEnd = '请选择结束日期'
							this.chooseCity = ['全部','全部']
						},
						getSothBusList(){ 
							if(this.singleEnd != '请选择结束日期' || this.singleState != '请选择开始日期'){
								if(this.singleEnd == '请选择结束日期' || this.singleState == '请选择开始日期'){
									if(this.singleEnd == '请选择结束日期'){
										// uni.showModal({
										//     title: '请选择结束日期',
										//     success: function (res) {
										//     }
										//   })
									}
									if(this.singleState == '请选择开始日期'){
										// uni.showModal({
										//     title: '请选择开始日期',
										//     success: function (res) {
										//     }
										//   })
									}
									return false
								}
								// 判断时间大小
								let date2_s=this.singleEnd.replace(/\-/g,'/') //结束
								let date1_s=this.singleState.replace(/\-/g,'/') //开始
								let date2_unix=Date.parse(date2_s) //將字符串格式日期转化为时间戳，就是1970年到当前日期的毫秒数
								let date1_unix=Date.parse(date1_s) 
								if(date1_unix > date2_unix){
									uni.showToast({
									  title: '日期大小有误',
									  icon: 'error',
									  duration: 1000
									})
									return false
								}
							}
							this.NUMBERJUDEGE ++;
							let parmes = {
								startTime: this.singleState && this.singleState != '请选择开始日期' ? this.singleState + ' 00:00:00' : '',
								endTime: this.singleEnd && this.singleEnd != '请选择结束日期' ? this.singleEnd + ' 23:59:59' : '',
								fromBizScope: this.cityId.length > 0 && this.cityId[0] != '' ? this.cityId[0] + ',' + this.cityId[1] : ''
							}
							if(this.wss){
								this.wss.sendInfo(parmes)
							}
					   },
    jump,
    async checkNewestVersion() {
      /* #ifdef APP-PLUS*/
      const [err, res] = await getNewestVerion({ platform: 2 })
      if (!request.errorCheck(err, res)) return false
      const data = res.data.data
      if (data) {
        checkVersion(data).then((res) => {
          if (res) {
            openSubView('/components/update-modal/update-modal', 'zoom-fade-out', 11, 'upload-mask')
            uni.$on('cancelUpdate', () => {
              this.init()
            })
          } else {
            this.init()
          }
        })
      } else {
        /* #endif*/
        this.init()
        /* #ifdef APP-PLUS*/
      }
      /* #endif*/
    },
    init() {
      pageList = this.$refs.page
      this.switchTab(1)
      this.switchTab(0)
    },
    // 获取滚动部分高度
    getPageHeight() {
      setTimeout(() => {
        getElementInfo('#top', res => {
          const windowHeight = sysInfo().windowHeight
          this.scrollHeight = windowHeight - res.height
        }, this)
      }, 200)
    },
    reload(index) {
      if (index) pageList[index].reloadList()
      else pageList[index].getData()
    },
    tabClick(cur) {
      // #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
      this.isTap = true
      // #endif
      this.switchTab(cur)
      if (this.firstShowModel && cur === 1) {
        this.showWechatModal(1)
        this.setFirstShowModel(false)
      }
    },
    switchTab(index) {
      if (pageList[index].list.length === 0) {
        if (index) pageList[index].reloadList()
        else pageList[index].getData()
      }

      if (this.activeInx === index) {
        return
      }

      /* #ifdef MP*/
      if (pageList[this.activeInx].list.length > MAX_CACHE_DATA) {
        pageList[this.activeInx].clear()
      }
      /* #endif*/

      this.activeInx = index
    },
    /* swiper*/
    onswiperchange(e) {
      const index = e.target.current || e.detail.current
      // #ifndef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
      this.switchTab(index)
      // #endif
      if (this.firstShowModel && index === 1) {
        this.showWechatModal(1)
        this.setFirstShowModel(false)
      }
    },
    animationfinish(e) {
      // #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
      const index = e.detail.current
      if (this.activeInx === index) {
        this.isTap = false
      }
      this._lastTabIndex = index
      this.switchTab(index)
      // #endif
    },
    /* swiper end*/

    // 显示弹窗
    showModel(e) {
      let options = {
        type: 0,
        id: e.id,
        payWay: e.payWay,
        status: e.status,
        title: '提示',
        content: '结束行程后将不可撤销，是否确定结束行程',
        button: [
          {
            text: '取消',
            type: 'gray'
          },
          {
            text: '确定'
          }
        ]
      }
      if (e.type === 'confirmOrder') {
        options = {
          type: 1,
          id: e.id,
          title: '确认订单',
          content: '确认订单后将通知司机和客户，请确保司机和车辆能够为客户提供服务。',
          button: [
            {
              text: '取消',
              type: 'gray'
            },
            {
              text: '确认订单'
            }
          ]
        }
      }
      /* #ifndef APP-NVUE*/
      uni.$emit('orderShowModal', options)
      this.show = true
      /* #endif*/

      /* #ifdef APP-NVUE*/
      openSubView('/pages/order/components/order-modal/order-modal', 'zoom-fade-out', 11, 'order-mask')
      setTimeout(() => {
        uni.$emit('orderShowModal', options)
      }, 100)
      /* #endif*/
    },
    getSize(e) {
      this.tabs[e.type].size = e.size
    },
    showWechatModal(type) {
      const options = {
        type: 999,
        modalType: type,
        title: '提示',
        content: '订单提醒功能需要获取微信消息通知权限',
        button: [
          {
            text: '确定'
          }
        ]
      }
      uni.$emit('orderShowModal', options)
      this.show = true
      this.setFirstLogin(false)
    },
    ...mapMutations({
      setOrderIndex: 'order/setOrderIndex',
      setFirstLogin: 'status/setFirstLogin',
      setFirstShowModel: 'status/setFirstShowModel',
	  setSothebusstate: 'storeUtils/setSothebusstate'
    })
  }
}
</script>

<style scoped lang="scss">
// .tops {
// 	position: fixed;
// 	z-index: 99;
// }
.no-permission{
  @include position(fixed,0,0,0,0);
  background:$color-background;
}
/deep/ .u-subsection--subsection{
	height: 90rpx !important;
}
/deep/ .u-subsection__item__text{
	font-size: 30rpx !important;
	font-weight: 400 !important;
}
/deep/ .u-subsection__item--no-border-right,/deep/ .u-subsection__item--last{
	border: none !important;
}
// 筛选
.screening-cv{
	width: 100%;
	box-sizing: border-box;
	padding:0rpx 30rpx 30rpx;
	font-size: 30rpx;
	font-weight: 400;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-direction: row !important;
	.screenOrder-cv{
		width: fit-content;
		border-radius: 4rpx;
		background-image: linear-gradient(to top, #DAA665, #F2C790);
		color: #7A5032;
		font-size: 30rpx;
		font-weight: 400;
		padding: 7rpx 15rpx;
		letter-spacing: 2rpx;
		margin-left: 20rpx;
	}
	.screenOrder-cv-close{
		width: fit-content;
		border-radius: 4rpx;
		color: #7A5032;
		font-size: 30rpx;
		font-weight: 400;
		padding: 7rpx 15rpx;
		letter-spacing: 2rpx;
		margin-left: 20rpx;
		background-color: #999 !important;
		color: #fff;
	}
}

.screening{
	width: 100%;
	box-sizing: border-box;
	padding:0rpx 40rpx 42rpx;
	font-size: 30rpx;
	font-weight: 400;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row !important;
	.screening-city{
		width: fit-content;
		flex-direction: row !important;
		align-items: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #000000E6;
		display: flex;
		.screening-city-conten {
			max-width: 80rpx;
			overflow: hidden;
			white-space: nowrap !important;
			text-overflow: ellipsis !important;
			-o-text-overflow: ellipsis !important;
			display: inline-block;
		}
		.screening-down-city{
			width: 20rpx;
			height: 14rpx;
			display: inline-block;
			margin-left: 14rpx;
			background-image: url('https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/icon/thearrow.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		.screening-down-city-false{
			display: inline-block;
			width: 20rpx;
			height: 14rpx;
			margin-left: 14rpx;
			background-image: url('https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/icon/thearrow.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
	}
	.screening-data{
		display: flex;
		flex-direction: row !important; 
		align-items: center;
		width: fit-content;
		.data-infomation{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0,0,0,0.9);
			margin: 0 16rpx;
		}
		.time-border{
			border: 2rpx solid #DDDDDDFF;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 16rpx 22rpx;
			border-radius: 12rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(0,0,0,0.4);
			line-height: 28rpx;
			.close-time{
				width: 25rpx;
				height: 25rpx;
				margin-right: 7rpx;
			}
		}
		.screenOrder{
			width: fit-content;
			border-radius: 4rpx;
			background-image: linear-gradient(to top, #DAA665, #F2C790);
			color: #7A5032;
			font-size: 30rpx;
			font-weight: 400;
			padding: 7rpx 15rpx;
			letter-spacing: 2rpx;
			margin-left: 20rpx;
		}
		.screening-down{
			width: 20rpx;
			height: 20rpx;
			border-top: 2rpx solid #000;
			border-right: 2rpx solid #000;
			transform: rotateZ(135deg);
			margin-left: 20rpx;
			margin-top: -7rpx;
		}
		.screening-down-false{
			width: 20rpx;
			height: 20rpx;
			border-top: 2rpx solid #000;
			border-right: 2rpx solid #000;
			transform: rotateZ(-45deg);
			margin-left: 20rpx;
			margin-top: 10rpx;
		}
		.picker{
			width: fit-content;
			// padding: 15rpx 10rpx;
			// border: 2rpx solid #999;
			border-radius: 4rpx;
			text-align: center;
		}
	}
}
// 开启顺风车抢单
.no-sothebus-state{
	width: 100%;
	height: 100%;
	display: flex !important;
	flex-direction: row !important;
	justify-content: center !important;
	align-items: center !important;
	.state-title{
		font-size: 40rpx;
		font-weight: 400;
		width: fit-content;
		margin-bottom: 40rpx;
	}
	.opent-sothebus-state{
		font-size: 40rpx;
		font-weight: 400;
		padding: 20rpx 30rpx !important;
		border-radius: 18rpx;
		background-color: #dc8a26;
		margin-bottom: 20rpx;
		text-align: center;
		color: #fff;
		width: fit-content;
		margin: 0 auto;
	}
}
</style>
